document.write("<div id='carousel' ><div id='left'><span class='circle'><b><</b></span></div><div id='leftBG'></div><div id='right'><span class='circle'><b>></b></span></div><div id='rightBG'></div><img id='img' src='img/0.jpg' align='center' width='1000px' height='600px'/><div id='navigate'></div></div>");
for(var t = 1; t < 11; t++) {
	document.getElementById("navigate").innerHTML += "<span id='" + t + "' class='dot'></span>";
}
var i = 1,carousel=document.getElementById("carousel"),
	car,dot = document.getElementsByClassName("dot");
	changimg = function() {
		document.getElementById("img").src = "img/" + i + ".jpg";
	},
	judgeAndChange = function() {
		i++;
		if(i > 10)
			i = 0;
		changimg();
	};
function start() {
	car = setInterval(function() {
		judgeAndChange();
	}, 2000)
}
start();
carousel.onmouseover = function() {
	clearInterval(car);
}
carousel.onmouseout = function() {
	start();
}
document.getElementById("leftBG").onclick = function() {
	i--;
	if(i < 0)
		i = 10
	changimg();
}
document.getElementById("rightBG").onclick = function() {
	judgeAndChange();
}
for(var d in dot) {
	dot[d].onmouseover = function() {
		i = this.id;
		changimg();
	}
}